<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店楼层平面图</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
    <style>
        .canvas-container {
            margin: 0 auto;
            border: 1px solid #e5e7eb;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .room-info {
            display: none;
            position: absolute;
            background-color: white;
            border: 1px solid #e5e7eb;
            border-radius: 0.375rem;
            padding: 0.75rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-2xl font-bold text-gray-800 mb-6">酒店楼层平面图</h1>
        
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex justify-between items-center mb-4">
                <div>
                    <select id="floorSelector" class="border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="1">3楼</option>
                    </select>
                </div>
                <div class="space-x-2">
                    <button id="zoomIn" class="bg-blue-500 text-white px-3 py-2 rounded hover:bg-blue-600">
                        <i class="fas fa-search-plus"></i> 放大
                    </button>
                    <button id="zoomOut" class="bg-blue-500 text-white px-3 py-2 rounded hover:bg-blue-600">
                        <i class="fas fa-search-minus"></i> 缩小
                    </button>
                    <button id="resetZoom" class="bg-gray-500 text-white px-3 py-2 rounded hover:bg-gray-600">
                        <i class="fas fa-sync"></i> 重置
                    </button>
                </div>
            </div>
            
            <div class="relative">
                <canvas id="floorCanvas" width="1240" height="762"></canvas>
                <div id="roomInfo" class="room-info">
                    <h3 class="text-lg font-semibold mb-2" id="roomNumber"></h3>
                    <div class="grid grid-cols-2 gap-2 text-sm">
                        <div class="text-gray-600">房型:</div>
                        <div id="roomType"></div>
                        <div class="text-gray-600">状态:</div>
                        <div id="roomStatus"></div>
                        <div class="text-gray-600">价格:</div>
                        <div id="roomPrice"></div>
                        <div class="text-gray-600">面积:</div>
                        <div id="roomArea"></div>
                    </div>
                    <div class="mt-3 flex justify-end">
                        <button id="viewRoomDetail" class="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600">
                            查看详情
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化 Fabric.js 画布
            const canvas = new fabric.Canvas('floorCanvas', {
                selection: false,
                renderOnAddRemove: true
            });
            
            // 房间状态映射
            const roomStatusMap = {
                'vacant': '空闲',
                'occupied': '已入住',
                'reserved': '已预订',
                'cleaning': '清扫中',
                'maintenance': '维修中'
            };
            
            // 房间状态颜色映射
            const roomStatusColorMap = {
                'vacant': '#dcfce7',
                'occupied': '#fee2e2',
                'reserved': '#fef3c7',
                'cleaning': '#e0f2fe',
                'maintenance': '#f3e8ff'
            };
            
            var data = {
  "1": {
    "version": "5.3.0",
    "objects": [
      {
        "type": "rect",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 55.03,
        "top": 20,
        "width": 200,
        "height": 100,
        "fill": "transparent",
        "stroke": "#374151",
        "strokeWidth": 2,
        "strokeDashArray": [
          5,
          5
        ],
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 3.66,
        "scaleY": 3.66,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "rx": 0,
        "ry": 0,
        "objectType": "wall"
      },
      {
        "type": "rect",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 490.75,
        "top": 389,
        "width": 200,
        "height": 100,
        "fill": "transparent",
        "stroke": "#374151",
        "strokeWidth": 2,
        "strokeDashArray": [
          5,
          5
        ],
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 3.56,
        "scaleY": 3.56,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "rx": 0,
        "ry": 0,
        "objectType": "wall"
      },
      {
        "type": "group",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 498.74,
        "top": 356,
        "width": 201,
        "height": 61,
        "fill": "rgb(0,0,0)",
        "stroke": null,
        "strokeWidth": 0,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1.42,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "objectType": "corridor",
        "objects": [
          {
            "type": "rect",
            "version": "5.3.0",
            "originX": "left",
            "originY": "top",
            "left": -100.5,
            "top": -30.5,
            "width": 200,
            "height": 60,
            "fill": "#e2e8f0",
            "stroke": "#94a3b8",
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "rx": 0,
            "ry": 0,
            "objectType": "corridor"
          }
        ]
      },
      {
        "type": "group",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 84.01,
        "top": 35,
        "width": 122,
        "height": 82,
        "fill": "rgb(0,0,0)",
        "stroke": null,
        "strokeWidth": 0,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "objectType": "room",
        "roomProps": {
          "roomNumber": "301",
          "roomType": "标准大床房",
          "roomStatus": "vacant",
          "fill": "#dcfce7",
          "roomPrice": "688",
          "roomArea": "35"
        },
        "objects": [
          {
            "type": "rect",
            "version": "5.3.0",
            "originX": "left",
            "originY": "top",
            "left": -61,
            "top": -41,
            "width": 120,
            "height": 80,
            "fill": "#dcfce7",
            "stroke": "#22c55e",
            "strokeWidth": 2,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "rx": 4,
            "ry": 4
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -31,
            "width": 24,
            "height": 18.08,
            "fill": "#374151",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "bold",
            "fontSize": 16,
            "text": "301",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -6,
            "width": 60,
            "height": 13.56,
            "fill": "#6b7280",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "normal",
            "fontSize": 12,
            "text": "标准大床房",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          }
        ]
      },
      {
        "type": "group",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 219.92,
        "top": 35,
        "width": 122,
        "height": 82,
        "fill": "rgb(0,0,0)",
        "stroke": null,
        "strokeWidth": 0,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "objectType": "room",
        "roomProps": {
          "roomNumber": "302",
          "roomType": "标准大床房",
          "roomStatus": "vacant",
          "fill": "#dcfce7",
          "roomPrice": "688",
          "roomArea": "35"
        },
        "objects": [
          {
            "type": "rect",
            "version": "5.3.0",
            "originX": "left",
            "originY": "top",
            "left": -61,
            "top": -41,
            "width": 120,
            "height": 80,
            "fill": "#dcfce7",
            "stroke": "#22c55e",
            "strokeWidth": 2,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "rx": 4,
            "ry": 4
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -31,
            "width": 24,
            "height": 18.08,
            "fill": "#374151",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "bold",
            "fontSize": 16,
            "text": "302",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -6,
            "width": 60,
            "height": 13.56,
            "fill": "#6b7280",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "normal",
            "fontSize": 12,
            "text": "标准大床房",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          }
        ]
      },
      {
        "type": "group",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 371.83,
        "top": 34,
        "width": 122,
        "height": 82,
        "fill": "rgb(0,0,0)",
        "stroke": null,
        "strokeWidth": 0,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "objectType": "room",
        "roomProps": {
          "roomNumber": "303",
          "roomType": "标准大床房",
          "roomStatus": "vacant",
          "fill": "#dcfce7",
          "roomPrice": "688",
          "roomArea": "35"
        },
        "objects": [
          {
            "type": "rect",
            "version": "5.3.0",
            "originX": "left",
            "originY": "top",
            "left": -61,
            "top": -41,
            "width": 120,
            "height": 80,
            "fill": "#dcfce7",
            "stroke": "#22c55e",
            "strokeWidth": 2,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "rx": 4,
            "ry": 4
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -31,
            "width": 24,
            "height": 18.08,
            "fill": "#374151",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "bold",
            "fontSize": 16,
            "text": "303",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -6,
            "width": 60,
            "height": 13.56,
            "fill": "#6b7280",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "normal",
            "fontSize": 12,
            "text": "标准大床房",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          }
        ]
      },
      {
        "type": "group",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 517.73,
        "top": 35,
        "width": 122,
        "height": 82,
        "fill": "rgb(0,0,0)",
        "stroke": null,
        "strokeWidth": 0,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "objectType": "room",
        "roomProps": {
          "roomNumber": "304",
          "roomType": "标准大床房",
          "roomStatus": "vacant",
          "fill": "#dcfce7",
          "roomPrice": "688",
          "roomArea": "35"
        },
        "objects": [
          {
            "type": "rect",
            "version": "5.3.0",
            "originX": "left",
            "originY": "top",
            "left": -61,
            "top": -41,
            "width": 120,
            "height": 80,
            "fill": "#dcfce7",
            "stroke": "#22c55e",
            "strokeWidth": 2,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "rx": 4,
            "ry": 4
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -31,
            "width": 24,
            "height": 18.08,
            "fill": "#374151",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "bold",
            "fontSize": 16,
            "text": "304",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -6,
            "width": 60,
            "height": 13.56,
            "fill": "#6b7280",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "normal",
            "fontSize": 12,
            "text": "标准大床房",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          }
        ]
      },
      {
        "type": "group",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 511.74,
        "top": 653,
        "width": 122,
        "height": 82,
        "fill": "rgb(0,0,0)",
        "stroke": null,
        "strokeWidth": 0,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "objectType": "room",
        "roomProps": {
          "roomNumber": "305",
          "roomType": "标准大床房",
          "roomStatus": "vacant",
          "fill": "#dcfce7",
          "roomPrice": "688",
          "roomArea": "35"
        },
        "objects": [
          {
            "type": "rect",
            "version": "5.3.0",
            "originX": "left",
            "originY": "top",
            "left": -61,
            "top": -41,
            "width": 120,
            "height": 80,
            "fill": "#dcfce7",
            "stroke": "#22c55e",
            "strokeWidth": 2,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "rx": 4,
            "ry": 4
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -31,
            "width": 24,
            "height": 18.08,
            "fill": "#374151",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "bold",
            "fontSize": 16,
            "text": "305",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -6,
            "width": 60,
            "height": 13.56,
            "fill": "#6b7280",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "normal",
            "fontSize": 12,
            "text": "标准大床房",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          }
        ]
      },
      {
        "type": "group",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 654.64,
        "top": 652,
        "width": 122,
        "height": 82,
        "fill": "rgb(0,0,0)",
        "stroke": null,
        "strokeWidth": 0,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "objectType": "room",
        "roomProps": {
          "roomNumber": "306",
          "roomType": "标准大床房",
          "roomStatus": "vacant",
          "fill": "#dcfce7",
          "roomPrice": "688",
          "roomArea": "35"
        },
        "objects": [
          {
            "type": "rect",
            "version": "5.3.0",
            "originX": "left",
            "originY": "top",
            "left": -61,
            "top": -41,
            "width": 120,
            "height": 80,
            "fill": "#dcfce7",
            "stroke": "#22c55e",
            "strokeWidth": 2,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "rx": 4,
            "ry": 4
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -31,
            "width": 24,
            "height": 18.08,
            "fill": "#374151",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "bold",
            "fontSize": 16,
            "text": "306",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -6,
            "width": 60,
            "height": 13.56,
            "fill": "#6b7280",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "normal",
            "fontSize": 12,
            "text": "标准大床房",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          }
        ]
      },
      {
        "type": "group",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 791.56,
        "top": 651,
        "width": 122,
        "height": 82,
        "fill": "rgb(0,0,0)",
        "stroke": null,
        "strokeWidth": 0,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "objectType": "room",
        "roomProps": {
          "roomNumber": "307",
          "roomType": "标准大床房",
          "roomStatus": "vacant",
          "fill": "#dcfce7",
          "roomPrice": "688",
          "roomArea": "35"
        },
        "objects": [
          {
            "type": "rect",
            "version": "5.3.0",
            "originX": "left",
            "originY": "top",
            "left": -61,
            "top": -41,
            "width": 120,
            "height": 80,
            "fill": "#dcfce7",
            "stroke": "#22c55e",
            "strokeWidth": 2,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "rx": 4,
            "ry": 4
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -31,
            "width": 24,
            "height": 18.08,
            "fill": "#374151",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "bold",
            "fontSize": 16,
            "text": "307",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -6,
            "width": 60,
            "height": 13.56,
            "fill": "#6b7280",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "normal",
            "fontSize": 12,
            "text": "标准大床房",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          }
        ]
      },
      {
        "type": "group",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 930.47,
        "top": 653,
        "width": 122,
        "height": 82,
        "fill": "rgb(0,0,0)",
        "stroke": null,
        "strokeWidth": 0,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "objectType": "room",
        "roomProps": {
          "roomNumber": "308",
          "roomType": "标准大床房",
          "roomStatus": "vacant",
          "fill": "#dcfce7",
          "roomPrice": "688",
          "roomArea": "35"
        },
        "objects": [
          {
            "type": "rect",
            "version": "5.3.0",
            "originX": "left",
            "originY": "top",
            "left": -61,
            "top": -41,
            "width": 120,
            "height": 80,
            "fill": "#dcfce7",
            "stroke": "#22c55e",
            "strokeWidth": 2,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "rx": 4,
            "ry": 4
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -31,
            "width": 24,
            "height": 18.08,
            "fill": "#374151",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "bold",
            "fontSize": 16,
            "text": "308",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -6,
            "width": 60,
            "height": 13.56,
            "fill": "#6b7280",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "normal",
            "fontSize": 12,
            "text": "标准大床房",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          }
        ]
      },
      {
        "type": "group",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 1065.38,
        "top": 652,
        "width": 122,
        "height": 82,
        "fill": "rgb(0,0,0)",
        "stroke": null,
        "strokeWidth": 0,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "objectType": "room",
        "roomProps": {
          "roomNumber": "309",
          "roomType": "标准大床房",
          "roomStatus": "vacant",
          "fill": "#dcfce7",
          "roomPrice": "688",
          "roomArea": "35"
        },
        "objects": [
          {
            "type": "rect",
            "version": "5.3.0",
            "originX": "left",
            "originY": "top",
            "left": -61,
            "top": -41,
            "width": 120,
            "height": 80,
            "fill": "#dcfce7",
            "stroke": "#22c55e",
            "strokeWidth": 2,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "rx": 4,
            "ry": 4
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -31,
            "width": 24,
            "height": 18.08,
            "fill": "#374151",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "bold",
            "fontSize": 16,
            "text": "309",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "top",
            "left": -1,
            "top": -6,
            "width": 60,
            "height": 13.56,
            "fill": "#6b7280",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "normal",
            "fontSize": 12,
            "text": "标准大床房",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          }
        ]
      },
      {
        "type": "group",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 789.56,
        "top": 397,
        "width": 152,
        "height": 122,
        "fill": "rgb(0,0,0)",
        "stroke": null,
        "strokeWidth": 0,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "objectType": "gym",
        "objects": [
          {
            "type": "rect",
            "version": "5.3.0",
            "originX": "left",
            "originY": "top",
            "left": -76,
            "top": -61,
            "width": 150,
            "height": 120,
            "fill": "#ffedd5",
            "stroke": "#fdba74",
            "strokeWidth": 2,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "rx": 4,
            "ry": 4
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "center",
            "left": -1,
            "top": -11,
            "width": 48,
            "height": 18.08,
            "fill": "#f97316",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "bold",
            "fontSize": 16,
            "text": "健身房",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          }
        ]
      },
      {
        "type": "group",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 342.84,
        "top": 258,
        "width": 152,
        "height": 122,
        "fill": "rgb(0,0,0)",
        "stroke": null,
        "strokeWidth": 0,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "objectType": "restaurant",
        "objects": [
          {
            "type": "rect",
            "version": "5.3.0",
            "originX": "left",
            "originY": "top",
            "left": -76,
            "top": -61,
            "width": 150,
            "height": 120,
            "fill": "#fee2e2",
            "stroke": "#fca5a5",
            "strokeWidth": 2,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "rx": 4,
            "ry": 4
          },
          {
            "type": "text",
            "version": "5.3.0",
            "originX": "center",
            "originY": "center",
            "left": -1,
            "top": -11,
            "width": 32,
            "height": 18.08,
            "fill": "#ef4444",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Times New Roman",
            "fontWeight": "bold",
            "fontSize": 16,
            "text": "餐厅",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": null,
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline"
          }
        ]
      },
      {
        "type": "rect",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 124.98,
        "top": 34,
        "width": 40,
        "height": 10,
        "fill": "#93c5fd",
        "stroke": null,
        "strokeWidth": 1,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "rx": 0,
        "ry": 0,
        "objectType": "window"
      },
      {
        "type": "rect",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 112.99,
        "top": 111,
        "width": 60,
        "height": 10,
        "fill": "#f59e0b",
        "stroke": null,
        "strokeWidth": 1,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "rx": 0,
        "ry": 0,
        "objectType": "door"
      },
      {
        "type": "i-text",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 833.53,
        "top": 29,
        "width": 32,
        "height": 18.08,
        "fill": "#1f2937",
        "stroke": null,
        "strokeWidth": 1,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 9.76,
        "scaleY": 2.78,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "fontFamily": "Times New Roman",
        "fontWeight": "normal",
        "fontSize": 16,
        "text": "街道",
        "underline": false,
        "overline": false,
        "linethrough": false,
        "textAlign": "left",
        "fontStyle": "normal",
        "lineHeight": 1.16,
        "textBackgroundColor": "",
        "charSpacing": 0,
        "styles": [],
        "direction": "ltr",
        "path": null,
        "pathStartOffset": 0,
        "pathSide": "left",
        "pathAlign": "baseline",
        "objectType": "text"
      },
      {
        "type": "i-text",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 57.03,
        "top": 555,
        "width": 32,
        "height": 18.08,
        "fill": "#1f2937",
        "stroke": null,
        "strokeWidth": 1,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 10.61,
        "scaleY": 6.29,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "fontFamily": "Times New Roman",
        "fontWeight": "normal",
        "fontSize": 16,
        "text": "园景",
        "underline": false,
        "overline": false,
        "linethrough": false,
        "textAlign": "left",
        "fontStyle": "normal",
        "lineHeight": 1.16,
        "textBackgroundColor": "",
        "charSpacing": 0,
        "styles": [],
        "direction": "ltr",
        "path": null,
        "pathStartOffset": 0,
        "pathSide": "left",
        "pathAlign": "baseline",
        "objectType": "text"
      },
      {
        "type": "rect",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 553.71,
        "top": 727,
        "width": 40,
        "height": 10,
        "fill": "#93c5fd",
        "stroke": null,
        "strokeWidth": 1,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "rx": 0,
        "ry": 0,
        "objectType": "window"
      },
      {
        "type": "rect",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 540.72,
        "top": 649,
        "width": 60,
        "height": 10,
        "fill": "#f59e0b",
        "stroke": null,
        "strokeWidth": 1,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "rx": 0,
        "ry": 0,
        "objectType": "door"
      }
    ]
  }
}
                       // 加载楼层数据
                       loadFloorData(data);
            
            // 加载楼层数据函数
            function loadFloorData(data) {
                // 清空画布
                canvas.clear();
                
                // 获取当前选择的楼层
                const floorId = document.getElementById('floorSelector').value;
                const floorData = data[floorId];
                
                if (!floorData) {
                    console.error('未找到楼层数据');
                    return;
                }
                
                // 设置画布背景色
                canvas.setBackgroundColor(floorData.background || '#ffffff', canvas.renderAll.bind(canvas));
                
                // 加载所有对象
                fabric.util.enlivenObjects(floorData.objects, function(objects) {
                    // 添加所有对象到画布
                    objects.forEach(obj => {
                        // 禁止所有对象的拖动和调整大小
                        obj.selectable = false;
                        obj.lockMovementX = true;
                        obj.lockMovementY = true;
                        obj.lockScalingX = true;
                        obj.lockScalingY = true;
                        obj.lockRotation = true;
                        
                        // 如果是房间对象，添加点击事件
                        if (obj.type === 'group' && obj.roomProps) {
                            makeRoomClickable(obj);
                        }
                        canvas.add(obj);
                    });
                    
                    canvas.renderAll();
                });
            }
            
            // 使房间可点击
            function makeRoomClickable(roomGroup) {
                // 确保对象不可拖动但可交互
                roomGroup.selectable = false;
                roomGroup.evented = true;
                
                // 绑定点击事件
                roomGroup.on('mousedown', function(e) {
                    const pointer = canvas.getPointer(e.e);
                    showRoomInfo(roomGroup, pointer);
                });
                
                // 设置鼠标样式
                roomGroup.hoverCursor = 'pointer';
            }
            
            // 显示房间信息
            function showRoomInfo(roomGroup, pointer) {
                const roomInfo = document.getElementById('roomInfo');
                const roomProps = roomGroup.roomProps || {};
                
                console.log('显示房间信息:', roomProps);
                
                // 填充房间信息
                document.getElementById('roomNumber').textContent = roomProps.roomNumber || '未知';
                document.getElementById('roomType').textContent = roomProps.roomType || '未知';
                document.getElementById('roomStatus').textContent = roomStatusMap[roomProps.roomStatus] || '未知';
                document.getElementById('roomPrice').textContent = roomProps.roomPrice ? `¥${roomProps.roomPrice}` : '未知';
                document.getElementById('roomArea').textContent = roomProps.roomArea ? `${roomProps.roomArea}㎡` : '未知';
                
                // 设置查看详情按钮点击事件
                document.getElementById('viewRoomDetail').onclick = function() {
                    alert(`查看房间 ${roomProps.roomNumber} 的详细信息`);
                };
                
                // 显示信息框并定位
                roomInfo.style.display = 'block';
                roomInfo.style.left = `${pointer.x + 10}px`;
                roomInfo.style.top = `${pointer.y + 10}px`;
                
                // 点击其他区域关闭信息框
                document.addEventListener('mousedown', closeRoomInfo);
            }
            
            // 关闭房间信息
            function closeRoomInfo(e) {
                if (e.target.closest('#roomInfo') === null) {
                    document.getElementById('roomInfo').style.display = 'none';
                    document.removeEventListener('mousedown', closeRoomInfo);
                }
            }
            
            // 缩放控制
            document.getElementById('zoomIn').addEventListener('click', function() {
                const zoom = canvas.getZoom();
                canvas.setZoom(zoom * 1.1);
            });
            
            document.getElementById('zoomOut').addEventListener('click', function() {
                const zoom = canvas.getZoom();
                canvas.setZoom(zoom * 0.9);
            });
            
            document.getElementById('resetZoom').addEventListener('click', function() {
                canvas.setZoom(1);
                canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
            });
            
            // 楼层选择器变化事件
            document.getElementById('floorSelector').addEventListener('change', function() {
                fetch('floor.json')
                    .then(response => response.json())
                    .then(data => {
                        loadFloorData(data);
                    });
            });
            
             // 定时刷新房间状态
             let refreshInterval;
            
            function startRefreshTimer() {
                // 清除可能存在的旧定时器
                if (refreshInterval) {
                    clearInterval(refreshInterval);
                }
                
                // 设置新的定时器，每6秒刷新一次
                refreshInterval = setInterval(function() {
                    console.log('定时刷新房间状态...');
                    // 使用新的API端点获取房间状态更新
                    const statusUpdates = [
  {
    "roomNumber": "301",
    "status": "occupied",
    "floorId": "1",
    "price": "788",
    "type": "标准大床房"
  },
  {
    "roomNumber": "302",
    "status": "cleaning",
    "floorId": "1"
  }
];
                    updateRoomStatus(statusUpdates);
                }, 6000); // 6秒刷新一次
            }
            
            // 只更新房间状态，使用简化的数据结构
            function updateRoomStatus(statusUpdates) {
                // 检查数据格式
                if (!statusUpdates || !Array.isArray(statusUpdates)) {
                    console.error('房间状态更新数据格式错误');
                    return;
                }
                
                // 获取当前选择的楼层
                const floorId = document.getElementById('floorSelector').value;
                
                // 遍历状态更新数据
                statusUpdates.forEach(update => {
                    // 检查是否属于当前楼层
                    if (update.floorId && update.floorId !== floorId) {
                        return; // 跳过不属于当前楼层的更新
                    }
                    
                    // 在画布上查找对应房间
                    const roomObjects = canvas.getObjects().filter(obj => 
                        obj.type === 'group' && 
                        obj.roomProps && 
                        obj.roomProps.roomNumber === update.roomNumber
                    );
                    
                    // 更新找到的所有匹配房间
                    roomObjects.forEach(roomObj => {
                        // 检查状态是否有变化
                        if (roomObj.roomProps.roomStatus !== update.status) {
                            console.log(`房间 ${update.roomNumber} 状态变化: ${roomObj.roomProps.roomStatus} -> ${update.status}`);
                            
                            // 更新房间属性
                            roomObj.roomProps.roomStatus = update.status;
                            
                            // 如果有其他需要更新的属性
                            if (update.price) roomObj.roomProps.roomPrice = update.price;
                            if (update.type) roomObj.roomProps.roomType = update.type;
                            
                            // 更新房间颜色
                            const rect = roomObj.getObjects().find(item => item.type === 'rect');
                            if (rect) {
                                rect.set({
                                    fill: roomStatusColorMap[update.status] || '#dcfce7',
                                    stroke: getStrokeColor(update.status)
                                });
                            }
                        }
                    });
                });
                
                // 重新渲染画布
                canvas.renderAll();
            }
            
            // 根据房间状态获取边框颜色
            function getStrokeColor(status) {
                const colorMap = {
                    'vacant': '#22c55e',
                    'occupied': '#ef4444',
                    'reserved': '#f59e0b',
                    'cleaning': '#0ea5e9',
                    'maintenance': '#a855f7'
                };
                return colorMap[status] || '#22c55e';
            }
            
            // 页面加载完成后启动定时器
            startRefreshTimer();
            
            // 完全禁用画布拖动和平移
            canvas.allowTouchScrolling = false;
            canvas.selection = false;
            
            // 禁用所有可能导致拖动的交互
            canvas.isDrawingMode = false;
            canvas.skipTargetFind = false;
            canvas.centeredScaling = false;
            canvas.centeredRotation = false;
            
            // 禁用默认的拖动行为
            canvas.defaultCursor = 'default';
            canvas.hoverCursor = 'default';
            canvas.moveCursor = 'default';
            
            // 锁定画布视图变换
            canvas.viewportTransform = [1, 0, 0, 1, 0, 0];
            canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
            
            // 禁用所有可能导致拖动的事件
            canvas.off('mouse:down');
            canvas.off('mouse:move');
            canvas.off('mouse:up');
            
            // 重新绑定鼠标事件，只处理点击房间
            canvas.on('mouse:down', function(opt) {
                // 不做任何处理，只允许对象自己的点击事件
                if (!opt.target) {
                    opt.e.preventDefault();
                    opt.e.stopPropagation();
                }
            });
            
            // 禁用鼠标滚轮缩放
            canvas.on('mouse:wheel', function(opt) {
                opt.e.preventDefault();
                opt.e.stopPropagation();
            });
            
            // 禁用浏览器默认的拖动行为
            document.addEventListener('dragstart', function(e) {
                e.preventDefault();
                return false;
            });
            
            // 禁用浏览器默认的触摸行为
            document.addEventListener('touchmove', function(e) {
                if (e.target.tagName === 'CANVAS') {
                    e.preventDefault();
                }
            }, { passive: false });
        });
    </script>
</body>
</html>